<script setup lang="ts">
import { ref } from "vue";
import { showLoadingToast, showSuccessToast, showToast } from "vant";
import { verification, changepwd } from "@/request/api/login";
import { useRouter } from "vue-router";
import { useSms } from "@/hooks/hooks";

const router = useRouter();

const username = ref("");
const { sms, smsText, smsNum, smsCounter,isSended } = useSms();

// const smsText = ref("发送验证码");
// const smsNum = ref(60);
// const smsCode = ref("");

const newPassword = ref("");
const confirmPassword = ref("");

let wxuserid = ref("");
let dduserid = ref(""); //钉钉userid
let wxgzuserid = ref(""); //微信公众号userid
let ykjuserid = ref("");

//发送验证码
function sendSmsCode() {
  if (!username.value) {
    showToast("请输入用户名");
    return;
  }

  if (smsNum.value !== 60) {
    showToast("验证码发送频率过高");
    return;
  }
  let data = {
    username: username.value,
    wxuserid: wxuserid.value,
    dduserid: dduserid.value,
    wxgzuserid: wxgzuserid.value,
    clienttype: "mobile",
  };
  showLoadingToast({
    message: "发送中...",
    forbidClick: true,
    duration: 0,
  });
  verification(data).then((res) => {
    if (res?.code === 0) {
      showToast(res.message);
      smsCounter(); //验证码读秒器
    }
  });
}

//修改密码
function handleSubmit() {
  const data = {
    user: username.value,
    yzm: sms.value,
    newmm: newPassword.value,
    qrnewmm: confirmPassword.value,
  };
  showLoadingToast("处理中...");

  changepwd(data).then((res) => {
    showSuccessToast("修改密码成功");
    setTimeout(() => {
      router.go(-1);
    }, 2000);
  });
}
</script>
<template>
  <div class="L-login-container">
    <div class="L-margin-30 L-text-align-center">
      <img src="@/assets/images/BIPlogo.png">
    </div>

    <van-cell-group inset style="opacity:0.7">
      <van-field v-model="username" required label="用户名" placeholder="请输入用户名" />
      <van-field v-model="sms" type="digit" required center clearable label="短信验证码" placeholder="请输入短信验证码">
        <template #button>
          <van-button plain style="width:90px" size="small" @click="sendSmsCode" type="primary">{{smsText}}</van-button>
        </template>
      </van-field>
      <van-field type="password" v-model="newPassword" required label="新密码" placeholder="请输入新密码" />
      <van-field type="password" v-model="confirmPassword" required label="确认密码" placeholder="请输入确认密码" />
    </van-cell-group>
    <van-row v-show="isSended" justify="center" align="center" class="L-margin-20" style="width:90%">
      <span class="L-secondary-text-color">没有收到验证码?</span>
      <a class="blue" @click="sendSmsCode">重新发送</a>
    </van-row>

    <div class="L-margin-top-40 L-text-align-center">
      <van-button @click="handleSubmit" type="primary" round size="large" class="L-login-btn">提交</van-button>
    </div>

  </div>
</template>

<style scoped>
</style>@/request/api/login